<template>


  <div id="root">
<!--    详情页面-->
    <router-view name="xiangqing"></router-view>
<!--    店铺详情-->
<router-view name="shophom"></router-view>
    <div v-if="loading" class="jiazai">
      <van-loading color="#000" size="24px" vertical>客官请稍等...</van-loading>
    </div>

    <van-skeleton :loading="loading" :row="10" avatar square title>
      <div>
        <Top></Top>
        <div class="head-bg">
          <img alt="" :src="'https://elm.cangdu.org/img/'+shop.image_path">
        </div>
        <div class="Top-top" v-if="toptop">
          <h2>{{shop.name}}</h2>
          <div>
            <p>优惠信息</p>
            <p v-if="shop.activities[0]!=null"> <van-icon name="bill" color="rgb(240, 115, 115)" /> {{shop.activities[0].description}}(app内专享) 一个活动 <van-icon name="arrow" /></p>
<p>商家公告</p>
            <p>公告:{{ shop.promotion_info }}</p>
          </div>
          <div class="xx" @click="toptop=!toptop" ><van-icon name="cross" color="#f5f5f5" size="20" /></div>
        </div>
        <div class="head" @click="shophom(shop)">
          <div class="head-img"><img alt="" :src="'https://elm.cangdu.org/img/'+shop.image_path"></div>
          <div class="head-content"><h2>{{ shop.name }}</h2>
            <p>商家配送: <span>/分钟送到</span><span>/配送费5</span></p>
            <p>公告:{{ shop.promotion_info }}</p>
          </div>
          <div class="head-right">
            <van-icon name="arrow"/>
          </div>
        </div>
        <p @click="toptop=!toptop" v-if="shop.activities[0]!=null" class="activity"> <van-icon name="bill" color="rgb(240, 115, 115)" /> {{shop.activities[0].description}}(app内专享) 一个活动 <van-icon name="arrow" /></p>
        <div class="nav">
          <div :class="{lan:appraise2=='商品'}" @click="appraise('商品')">商品</div>
          <div :class="{lan:appraise2=='评价'}" @click="appraise('评价')">评价</div>
        </div>
        <div v-if="appraise2=='商品'">
        <div class="content">
          <div class="content-left">
            <div class="num-root" v-for="(v,i) in food" :key="i" :class="{ContentLeft3:ContentLeft1==i}" @click="ContentLeft(i)">{{ v.name }}<span v-if="v.zuonum>0" class="num">{{v.zuonum}}</span></div>
          </div>
<!--          左边内容-->
          <div class="content-right">
            <div v-for="(v,i) in num" :key="i" class="food" :id="'a'+i">
<!--              左边标题-->
              <div  class="food-title"><span>{{ v.name }}</span><span>{{ v.description }}</span></div>
<!--              标题里边内容-->
              <div v-for="(item,j) in v.foods" :key="j" class="foods" >
                <div class=" foods-img" @click="details(item)">
                  <div v-show="item.attributes[0]!=null" class="xinpin">
                    <p>新品</p>
                  </div>
                  <img :src="'https://elm.cangdu.org/img/'+item.image_path" alt="">
                </div>
                <div class="foods-right">
                  <h4 @click="details(item)">{{ item.name }} <span v-if="item.attributes[1]!=null"><van-tag plain
                                                                                     type="primary">{{ item.attributes[1].icon_name }}</van-tag></span>
                  </h4>
                  <p @click="details(item)">{{ item.tips }}</p>
                  <div class="price-root"><p>￥{{ item.specfoods[0].price }}</p>
                    <div class="price">
                      <van-icon v-if="item.__v!=0" color="#3190e8" name="minus" size="20" @click="sub(item.specfoods[0].price,i,j,item.specfoods[0]._id,false,false,item.specfoods.length,v)"/>
                      <span v-if="item.__v>0">{{ item.__v }}</span>
                      <div>
                         <van-button v-show="item.specfoods.length>1" @click="showPopup(i,j,v)" type="primary" size="mini">选规格</van-button>
                        <van-icon v-show="item.specfoods.length==1" color="#3190e8" name="add" size="20"
                                  @click="add(item.specfoods[0].price,i,j,item.specfoods[0]._id,$event,false,v)"/>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <!--              标题里边内容-->


            </div>
          </div>
        </div>
<!--        规格弹出层-->
        <van-popup v-if="show" closeable v-model="show" class="show">
          <div>
            <h4>{{food[i].foods[j].name}}</h4>
            <p>规格</p>
            <div class="show-xuan">
             <div v-for="(v,i) in food[i].foods[j].specfoods" :class="{showXuanBlue:showXuanBlue==i}" :key="i" @click="ShowXuan(i,v)">{{v.specs_name}}</div>
            </div>
            <div class="show-go">
              <span>￥20</span>
              <van-button size="small" type="info" @click="ShowAddShopping()">加入购物车</van-button>
            </div>
          </div>
        </van-popup>
        <!--动画-->
        <div class="content-donghua">
          <van-icon color="#3190e8" name="add" class="AM entAM" size="20"/>
          <van-icon color="#3190e8" name="add" class="AM entAM" size="20"/>
          <van-icon color="#3190e8" name="add" class="AM entAM" size="20"/>
          <van-icon color="#3190e8" name="add" class="AM entAM" size="20"/>
          <van-icon color="#3190e8" name="add" class="AM entAM" size="20"/>
          <van-icon color="#3190e8" name="add" class="AM entAM" size="20"/>
          <van-icon color="#3190e8" name="add" class="AM entAM" size="20"/>
          <van-icon color="#3190e8" name="add" class="AM entAM" size="20"/>
          <van-icon color="#3190e8" name="add" class="AM entAM" size="20"/>
          <van-icon color="#3190e8" name="add" class="AM entAM" size="20"/>
        </div>
        <!--动画-->
        <!--        底部购物车-->
        <div class="bottom">
          <div :class="{go:sum>0}" class="bottom-go" @click="Goshow()">
<!--            <van-icon name="chat-o"  />-->
            <van-icon color="#255244255" name="shopping-cart" :badge="shoppinglength" size="40"/>
          </div>
          <div class="bottom-price"><p>￥{{ sum }}</p>
            <p>配送费￥{{shop.float_delivery_fee}}</p></div>
        </div>
        <div :class="{fu:sum>0}" class="bottom-price-tow" @click="zhifu()">{{ suan }}</div>
        <!--        购物车详细-->
        <div v-show="panel">
          <div class="shopping">
            <p class="shopping-one"><span>购物车</span><span @click="empty()"><van-icon name="delete"/>清空</span></p>

            <div v-for="(v,i) in shopping2" v-show="num[v.i].foods[v.j].__v>0" :key="i" class="shopping-div">
              <h4>{{ num[v.i].foods[v.j].name }}
                <br><span v-if="num[v.i].foods[v.j].specfoods[v.showXuanBlue]!=null">{{num[v.i].foods[v.j].specfoods[v.showXuanBlue].specs_name}}</span>
               </h4>
              <div class="shopping-price">
<!--                减号-->
<!--                <van-icon v-if="num[v.i].foods[v.j].specfoods[v.showXuanBlue]!=null" color="#3190e8" name="minus" size="20" @click="sub(v.a, v.i, v.j,v.id,i,v.showXuanBlue)"/>-->
                <van-icon color="#3190e8" name="minus" size="20" @click="sub(v.a, v.i, v.j,v.id,i,v.showPage,false,false)"/>
<!--                数量-->
                <span v-if="num[v.i].foods[v.j].specfoods[v.showXuanBlue]!=null">{{num[v.i].foods[v.j].specfoods[v.showXuanBlue].sum}}</span>
                <span v-else>{{num[v.i].foods[v.j].__v }}</span>
<!--                加号-->
                <div>
                  <van-icon color="#3190e8" name="add" size="20" @click="add(v.a, v.i, v.j,v.id,0,v.showPage,false)"/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
        <div v-else>
          <router-view></router-view>
        </div>

      </div>
    </van-skeleton>

  </div>


</template>

<script>
import Top from "../components/Top";
import Vue from 'vue';
import $ from "jquery";
import {Toast} from 'vant'
import  qs from "../../node_modules/querystring"
export default {
  name: "Shopdetail",
  components: {Top},
  created() {
    // console.log(this.$route.query.id);
      this.axios.get('https://elm.cangdu.org/shopping/restaurant/' + this.$route.query.id).then(data => {
        // console.log(data.data)
        this.shop = data.data;
        this.$store.commit("datashop",data.data);
      }).catch(err => {
        console.log(err)
      });
    this.axios.get('https://elm.cangdu.org/shopping/restaurant/' + this.$route.query.id).then(data => {
      // console.log(data.data)
      this.shop = data.data;
      this.$store.commit("datashop",data.data);
    }).catch(err => {
      console.log(err)
    });
    this.axios.get('https://elm.cangdu.org/shopping/v2/menu?restaurant_id=' + this.$route.query.id).then(data => {
      // console.log(data.data);
      this.food = data.data;
      this.Initfood = data.data;
      this.loading = false;
    })
  },
  computed: {
    num() {
      return this.food;
    },
    //购物车数据
    shopping2() {
      return this.shopping
    },
    //    结算
    suan() {
      if (this.sum >= this.shop.float_minimum_order_amount) {
        return "去结算"
      } else {
        return "还差" + (this.shop.float_minimum_order_amount - this.sum) + "起送"
      }
    },

  },
  //数据
  data() {
    return {
      toptop:false,
      shop: '',//店铺
      food: "",//食品
      Initfood: "",
      sum: 0,//价格
      // sum:false,//减
      i: 0,//下标
      j: 0,//下标
      shopping: [],//购物车商品数组
      shoppingchea:[],//商品信息
      panel: false,
      loading: true,//加载动画
      BallIndex: 0,//小球下标
      show:false,//规格弹出层
      showIndex:0,//弹出层选中个数
      showXuanBlue:0,//规格弹出层选中选择
      showPage:"",//规格弹出层选中的信息
      ContentLeft1:0,//左边默认选择的标题
      appraise2:'商品',//评价和商品的切换
      shoppinglength:0,//购物车数量
      zuonum:0,//左边数量

    }
  },
  //    方法
  methods: {
    //左边选中标题
    ContentLeft(i){
      this.ContentLeft1=i;
      // console.log(i,this.ContentLeft1)
      let pageId = document.querySelector("#a"+i);
      let pageScroll = document.querySelector(".content-right");
      pageScroll.scrollTo({
        "top":pageId.offsetTop,
        "behavior": "smooth"
      })
    },
    appraise(a){
      this.appraise2=a;
      if (a=='评价'){
        this.$router.push({path:"/shopdetail/appraise",query:{id:this.$route.query.id}});
      }
    },
    //规格弹出层
    showPopup(i,j) {
      this.show = true;
      this.i = i;
      this.j = j;
      this.showXuanBlue=0;
      this.showPage=this.food[i].foods[j].specfoods[0];
    },
    //选中规格弹出层
    ShowXuan(i,v){
      this.showXuanBlue=i;
      this.showPage=v;
    },
    //弹出层购物车
    ShowAddShopping(){
      this.show=false;
      this.food[this.i].foods[this.j].__v += 1;
      console.log(this.food[this.i]);
      //t添加左边个数
      if (this.food[this.i].zuonum){
        this.food[this.i].zuonum++;
      }else {
        Vue.set(this.food[this.i],'zuonum',1)
      }
      //购物车数量加加
      this.shoppinglength++;
      let id=this.showPage._id;
      // let Obj=this.showPage;
      if (this.showPage.sum){
        this.showPage.sum+=1;
      }else {
        Vue.set(this.showPage,'sum',1);
      }
      let jia = true;
      if (this.shopping.length != 0) {
        for (let i in this.shopping) {
          let OBj = this.shopping[i]
          if (id == OBj.id) {
            jia = false;
          }
        }
      } else {
        jia = true;
      };
      this.sum+=this.showPage.price;
      if (jia) {
        this.shopping.push({a:this.showPage.price, i:this.i, j:this.j, id:id,showXuanBlue:this.showXuanBlue,showPage:this.showPage})
      }
    },
    //添加商品进购物车
    add(a, i, j, id, event,showPage,zuonum) {
      console.log(zuonum);
      if (zuonum){
        if (zuonum.zuonum){
          zuonum.zuonum++;
        }else {
          Vue.set(zuonum,'zuonum',1)
        }
      }else {
        this.food[i].zuonum++;
      }
      this.i = i;
      this.j = j;
      if (showPage){
        showPage.sum+=1;
        // this.shoppinglength++;
      }
      this.food[i].foods[j].__v += 1;
      this.shoppinglength++;
      this.sum += a;
      let jia = true;
      if (this.shopping.length != 0) {
        for (let i in this.shopping) {
          let OBj = this.shopping[i]
          if (id == OBj.id) {
            jia = false;
          }
        }
      } else {
        jia = true;
      }
      if (jia) {
        this.shopping.push({a: a, i: i, j: j, id: id})
      }
      // 小球动画
      if (event!=0){
      let top = event.clientY,
          left = event.clientX,
          endTop = window.innerHeight - 45,  // 小球降落终点
          endLeft = 40;
     // 小球的下标
     let BallIndex=this.BallIndex += 1;
      if (this.BallIndex > $(".AM").length) {
        this.BallIndex = 0;
      }
      $(".AM").eq(this.BallIndex).removeClass("entAM").css({
        left: left + 'px',
        top: top + 'px',
      });
      $(".AM").eq(this.BallIndex).animate(
          {top: endTop + "px", left: endLeft + "px"},
          1000, function () {
        $(".AM").eq(BallIndex).addClass("entAM");
      });
      setTimeout(function() {
        $(".AM").eq(BallIndex).addClass("entAM");
      }, 1000);  //这里的延迟值和小球的运动时间相关
      }
    },
    //减少商品进购物车
    sub(a, i, j, ii,index,showPage,Toast1,zuonum) {

      if (Toast1>1){
        Toast('多规格商品只能去购物车删除');
      }else {
        if (zuonum){
          console.log("if减")
          zuonum.zuonum--;
        }else {
          this.food[i].zuonum -= 1;
        }
        console.log("if外减")
        console.log(zuonum)
        console.log(this.sum);
        this.food[i].foods[j].__v -= 1;
        this.shoppinglength--;
        this.sum -= a;
        if (showPage){
          showPage.sum-=1;
          if (showPage.sum==0){
            this.shopping.splice(index,1)
          }
        }
        //判断加号 的直接删除
        if (this.food[i].foods[j].__v==0){
          this.shopping.splice(index,1)
        }

        if (this.sum <= 0) {
          this.panel = false;
        }
      }

    },
    //购物车显示
    Goshow() {
      if (this.shopping.length != 0) {
        this.panel = !this.panel;
      }
    },
    //    清空购物车
    empty() {
      for (let i in this.shopping) {
        let Obj = this.shopping[i]
        this.food[Obj.i].foods[Obj.j].__v = 0
        this.food[Obj.i].zuonum=0;
      }
      this.shopping = [];
      this.panel = false;
      this.shoppinglength=0;
      this.sum=0;
    },
    zhifu(){
      if (this.sum >= this.shop.float_minimum_order_amount){
      for (let i in this.shopping){
        let Obj =this.shopping[i];
        let sum=0;//判断价格
        let name2=null;//判断是否有规格
        if (Obj.showPage){
          sum=Obj.showPage.sum;
          name2=Obj.showPage.specs_name;
        }else {
          sum=this.food[Obj.i].foods[Obj.j].__v;
          name2=null;
        };
        this.shoppingchea.push({attrs:[],extra:{},id:Obj.id,name:this.food[Obj.i].foods[Obj.j].name,specs:name2,
          price:Obj.a,quantity:sum,packing_fee:2})
      }
      this.axios.post('https://elm.cangdu.org/v1/carts/checkout',qs.stringify({
        restaurant_id:this.$route.query.id,
        geohash:"45.770175,126.62539",
      entities:this.shoppingchea,
    })).then(data=>{
      console.log(data.data);
      }).catch(err=>{
        console.log(err)
      })
     this.$store.commit("datacorder",this.shoppingchea);
      this.$store.commit("datasum",(this.sum+this.shop.float_delivery_fee));
      this.$router.push('/close')
      }
    },
    details(a){
      this.$store.commit("clickfoods",a)
this.$router.push("/shopdetail/xiangqing")
    },
    shophom(a){
      this.$router.push("/shopdetail/shophom")
console.log(a);
    }
  },

}
</script>

<style scoped>
#root {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.xx{
  bottom: 1rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

}
.ContentLeft3{
  border-left: .15rem solid #3190e8!important;
  background-color: #fff !important;
}
.AM {
  position: absolute;
  /* display: none; */
  z-index: 20;
}
.lan{
  color: #3190e8;
  border-color: #3190e8;
}
.entAM {
  display: none;
}

.jiazai {
  position: absolute;
  width: 100px;
  height: 100px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 999;
}
.show{

  width: 70%;
  background-color: #fff;
  //z-index: 18;
  border: 1px;
  padding-left: 2%;
  padding-right: 2%;
  border-radius: .2rem;
}
.show h4{
  font-size: 1.7rem;
  color: #222;
  font-weight: 400;
  text-align: center;
  padding: .5rem;
}
.show-xuan{
  display: flex;
  flex-wrap: wrap;
  padding: .4rem 0;
}
.show-xuan div{
  font-size: .6rem;
  padding: .3rem .5rem;
  border: .025rem solid #ddd;
  border-radius: .2rem;
  margin-right: .5rem;
  margin-bottom: .2rem;
}
.show-go{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f9f9f9;
  padding: .5rem;
  border: 1px;
  border-bottom-left-radius: .2rem;
  border-bottom-right-radius: .2rem;
}
.showXuanBlue{
  border-color: #3199e8;
  color: #3199e8;
}
/* .right-one{
    overflow: auto;
} */
/*动画*/
.abc-enter-active {
  transition: all 6s ease-in-out;

}

.abc-leave-active {
  transition: ease-in-out all 6s;

}

/*开始动画位置和结束动画终点位置*/
.abc-enter, .abc-leave-to {
  position: absolute;
  top: 69px;
  right: 25px;

}

/*开始动画的结束值和结束动画的开始值*/
.abc-enter-to, .abc-leave {
  position: absolute;
  top: 0px;
  right: 243px;
}

.xinpin {
  width: 33px;
  height: 22px;
  position: absolute;
  overflow: hidden;
}

.xinpin p {
  background-color: #4cd964;
  position: absolute;
  color: white;
  width: 33px;
  height: 7px;
  z-index: 9;
  transform: rotateZ(-45deg);
  font-size: 10px;
  top: 2px;
  left: -5px;
}

.content-donghua {
  position: absolute;
//background-color: rgb(124, 48, 48);
}

.donghua {
  position: absolute;
  top: 69px;
  right: 25px;
  z-index: 999;
  background-color: red;
  width: 20px;
  height: 20px;

}

/deep/ .one {
  background-color: transparent;
  position: fixed;
  height: 10px;
  z-index: 10;
}

/deep/ .one span {
  margin: 0;
}

.head {
  display: flex;
  color: white;
  background-color: rgba(119,103,137,.43);
  padding: 2%;
  position: fixed;
  width: 96%;
  height: 100px;
}
.head-bg img{
  position: absolute;
  top: 0;
  width: 100%;
}
.head img {

}

/*.head h2{*/
/*    margin-bottom: 10px;*/
/*}*/
.head p {
  font-size: .5rem;
  color: #fff;
  /*width: 11.5rem;*/
  margin-top: 10px;

}

.head-img {
  margin-right: 10px;
  border-radius: 10px;
  overflow: hidden;
  width: 80px;
  /*background-color: #6ac20b;*/
}
.head-img img{
  width: 80px;
}

.head-right {
  width: 5%;
  line-height: 100px;
  /*float: right;*/
}

.head-content {
  width: 70%;
}

.activity {
  width: 100%;
  margin-top: 100px;
  height: 20px;
  line-height: 20px;
  /*display: flex;*/
  /*justify-content: space-around;*/
  background-color: rgba(119,103,137,.43);
  position: fixed;
  color: white;
  display: flex;
  //justify-content: space-between;
  //margin-top: .5rem;
  //padding-right: 1rem;
}

.nav {
  display: flex;
  justify-content: space-around;
  padding: 4%;
  background-color: white;
  position: fixed;
  width: 92%;
  margin-top: 120px;
  height: 50px;
}

.content {
  display: flex;
  justify-content: space-between;
  height: 70%;
  position: fixed;
  width: 100%;
  margin-top: 170px;
  //border-top: #3c3c3c 1px solid;

  /* overflow-y: scroll; */

}

.content-left {
  width: 30%;
  background-color: #f5f5f5;
  overflow-y: scroll;
  position: absolute;
  left: 0;
  z-index: 10;
  height: 420px;
  //position: relative;
}
.num-root{
  position: relative;
}
.num{
  position: absolute;
  top: .1rem;
  right: .1rem;
  background-color: #ff461d;
  line-height: .6rem;
  text-align: center;
  border-radius: 50%;
  border: .025rem solid #ff461d;
  min-width: .6rem;
  height: .6rem;
  font-size: .5rem;
  color: #fff;
  font-family: Helvetica Neue,Tahoma,Arial;
}
.content-left a{
  font-size: .6rem;
  color: #666;}
.content-left div {
  padding: 20px 10px;
  border-bottom: .025rem solid #ededed;
  box-sizing: border-box;
  border-left: .15rem solid #f8f8f8;
  position: relative;
  text-align: center;
  background-color: #f5f5f5;

}

.content-right {
  width: 100%;
  background-color: #f5f5f5;
  overflow-y: scroll;
  position: absolute;
  right: 0;
  height: 420px;
}

.food-title {
  width: 62%;
  padding: 4%;
  line-height: 20px;
  align-items: center;
  float: right;
  background-color: #f5f5f5;
}

.food {


}

.foods {
  display: flex;
  width: 96%;
  background-color: white;
  background-color: #fff;
  padding: .6rem 2%;
  border-bottom: 1px solid #f8f8f8;
  /*position: relative;*/
  justify-content: flex-end;

}

.foods-right {
  width: 55%;
}

.foods p, .foods h4 {
  padding-bottom: 10px;
  padding-left: 10px;

}

.foods h4 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 130px;
}

.foods img {
  width: 50px;
}

.foods-img {
  width: 50px;
}

.price-root {
  display: flex;
  justify-content: space-between;
  width: 95%;
}

.price {
  display: flex;
  justify-content: flex-end;
  width: 50%;
  //background-color: #6ac20b;
}


.bottom {
  display: flex;
  position: fixed;
  z-index: 5;
  bottom: 0;
  width: 100%;
  height: 50px;
  background-color: #3d3d3f;
  /*justify-content: space-around;*/
  color: white;

}

.bottom-go {
  display: flex;
  background-color: #3d3d3f;
  position: relative;
  padding: .4rem;
  border: .18rem solid #444;
  border-radius: 50%;
  /*left: .5rem;*/
  top: -25px;
  width: 40px;
  height: 40px;
  /*padding-left: 20px;*/
  margin-left: 20px;
  margin-right: 20px;

}

.bottom-price-tow {
  position: fixed;
  z-index: 5;
  bottom: 0;
  width: 40%;
  background-color: #535356;
  /*background-color: #3d3d3f;*/
  /*justify-content: space-around;*/
  color: white;
  right: 0;
  height: 50px;
  text-align: center;
  line-height: 50px;
}

.fu {
  background-color: #4cd964;
}

.go {
  background-color: #3190e8;
}

.shopping {
  position: fixed;
  width: 100%;
  /*padding-bottom: 2rem;*/
  /*z-index: 10;*/
  bottom: 50px;
  left: 0;
  padding-bottom: 5%;

  background-color: #fff;
  z-index: 3;
}

.shopping-one {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px;
  background-color: #eceff1;
}

.shopping-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px;
}

.shopping-price {
  display: flex;
  width: 25%;
  justify-content: space-between;
}
.Top-top{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #262626;
  z-index: 200;
  padding: 1.25rem;
  color: white;
  text-align: center;
}
.Top-top p{
  line-height: 50px;
}
</style>